$(function () {
    // 1 初始化表单内的组件
    // 1 复制粘贴 ！！

    // 2 通过 location和URLSearchParams 获取传递过来的id

    // 3 根据id 发送请求获取被编辑的文章详情数据

    // 4 给发布按钮绑定点击事件
    // 1 获取对应的数据 拼接成 formdata格式的参数
    // 2 发送给后台 完成编辑
    // 3 编辑成功了 重定向回文章列表页面 ！！

    // 全局变量 id
    let id;

    // 1 文件上传框 绑定 change事件
    $("#inputCover").change(function () {
        const file = this.files[0]
        $("#coverimg").prop("src", URL.createObjectURL(file))
    })
    // 2 发送请求 获取 文章列表数据
    function getCategoryList() {
        $.get("/admin/category/list", function (res) {
            let html = "";
            res.data.forEach(value => {
                html += `<option value="${value.id}">${value.name}</option>`
            })
            $("#category").html(html)
        })
    }
    // 3初始化 日期选择器
    function renderDate() {
        // 执行一个laydata实例
        layui.laydate.render({
            elem: '#articleDate' //指定元素
        });

    }
    // 4 初始化富文本编辑器 
    function renderEditor() {
        tinymce.init({
            selector: '#articleContent',
            language: 'zh_CN',
        });
    }
    // 5 发送请求 获取 数据 渲染到 表单组件中
    function getArticleDetail() {
        const usp = new URLSearchParams(this.location.search);
        id = usp.get("id");
        console.log(id);
        $.get("/admin/article/search", { id }, function (res) {
            console.log(res);
            const { title, cover, categoryId, date, content } = res.data;
            // 5.1 填充 标题
            $("[name='title']").val(title);
            $("#coverimg").prop("src", cover);//错误 把prop 写成了orop导致获取不成功
            $("[name='categoryId']").val(categoryId);
            $("[name='date']").val(date);
            // 文章内容  1  直接给文本域赋值  2 如果失败了 查阅 tinymce文档 查看如何赋值
            $("#articleContent").val(content);
        })
    }
    getCategoryList();
    renderDate();
    renderEditor();
    getArticleDetail();


    // 6  给 “发布” 绑定点击事件
    $(".btn-edit").click(function () {
        postArticle('已发布')
    })
    // 6  给 "草稿" 绑定点击事件
    $(".btn-draft").click(function () {
        postArticle('')
    })

    function postArticle(state) {

        const fd = new FormData($("#form")[0])

        // 假设我们没有修改过  文章封面 那么通过 formdata获取到的 file 文件 没有名称 没有大小，
        //  （不清楚后台接收到这样文件能不能正常识别）

        // 对应富文本的内容 需要单独添加到formdata中
        const content = tinyMCE.editors["articleContent"].getContent();

        fd.append("content", content);
        fd.append("state", state)
        fd.append("id", id);

        // fd.forEach((v, k) => console.log(v, k));

        $.ajax({
            url: "/admin/article/edit",
            type: "post",
            data: fd,
            contentType: false,
            processData: false,
            success(res) {
                console.log(res);
                if (res.code === 200) {
                    // 5.3 返回文章列表页面
                    location.href = "article_list.html";
                }
            }
        })
    }
})